<template>
  <el-dialog title="分配权限" :visible.sync="showDialog">
    <el-checkbox-group v-model="permissionIds">
      <el-tree v-slot="{data}" :data="permissionList" default-expand-all>
        <el-checkbox :label="data.id">{{ data.name }}</el-checkbox>
      </el-tree>
    </el-checkbox-group>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="showDialog=false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { getPermissionList } from '@/api/permission'
import { searchSubDepart } from '@/utils/index'
import { allocatePermission, getRole } from '@/api/setting'
export default {
  data() {
    return {
      showDialog: false,
      permissionList: [],
      permissionIds: []
    }
  },
  async created() {
    const res = await getPermissionList()
    this.permissionList = searchSubDepart(res, '0')
  },
  methods: {
    async  open(id) {
      const { permIds } = await getRole(id)
      this.permissionIds = permIds
      this.roleId = id
      this.showDialog = true
    },
    async  save() {
      await allocatePermission({
        id: this.roleId,
        permIds: this.permissionIds
      })
      this.$message.success('提示用户')
      this.showDialog = false
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
